<template>
    <div class="home-wrap" @click.stop="hideHistoryPanel">
        <div class="home-body">

            <Nav></Nav>
            <Logo :tip="true" @logoClick="logoClick"></Logo>
            <Search></Search>

            <Quick v-if="config.indexType.value == 'quick'"></Quick>
            <Bookmark v-if="config.indexType.value == 'bookmark'"></Bookmark>

            <Foot></Foot>

            <!-- 暗黑模式 -->
            <a-button class="dark-mode" type="primary" shape="circle" @click="darkMode">
                <template #icon>
                    <StopTwoTone/>
                </template>
            </a-button>
        </div>
    </div>
</template>

<script>
    import {useStore} from "vuex";
    import {openDarkMode} from '/src/util/index';

    import Nav from './Nav.vue';
    import Logo from './Logo.vue';
    import Search from './Search.vue';
    import Quick from './Quick.vue';
    import Bookmark from './Bookmark.vue';
    import Foot from "./Foot.vue";

    // icon
    import {StopTwoTone} from '@ant-design/icons-vue';

    export default {
        components: {
            Nav,
            Logo,
            Search,
            Quick,
            Bookmark,
            Foot,
            StopTwoTone,
        },
        // 数据
        data() {
            return {
                // vuex 状态
                config: useStore().state.skin.default,
            }
        },
        // DOM未渲染前调用
        created() {

        },
        // DOM渲染后调用
        mounted() {

        },
        // 方法
        methods: {
            // logo点击
            logoClick() {
                let that = this,
                    config = that.config,
                    mode = config.indexType.value;

                if (mode == 'quick') {
                    config.indexType.value = 'bookmark';
                } else if (mode == 'bookmark') {
                    config.indexType.value = 'quick';
                } else {
                    that.$message.error('配置出错: mode');
                }
                that.$store.commit('setNowSkin', config);
            },
            // 关闭历史记录面板
            hideHistoryPanel() {
                let that = this,
                    config = that.config;
                config.history.state = false;
                that.$store.commit('setNowSkin', config);
            },
            // 模式
            darkMode() {
                openDarkMode();
            },
        },
    }
</script>

<style lang="less" scoped>
    @width: 1000px;

    .home-wrap {
        width: 100vw;
        height: 100vh;
        overflow-x: hidden;

        .home-body {
            width: @width;
            margin: 0 auto;

            .dark-mode {
                position: fixed;
                bottom: 20px;
                right: 20px;
            }
        }
    }

    @media screen and (max-width: @width + 40) {
        .home-wrap {
            .home-body {
                width: auto;
                overflow: hidden;
                margin: 0;
                padding: 0 20px 20px 20px;
            }
        }
    }
</style>
